import React from 'react'
import {connect} from 'react-redux'
import * as Actions from '../../store/action/actionStudent'

function Student(props){
    const {name,age,handleNameInput,handleAgeInput,handleCommit} = props

    return (
        <div >
            <h1>name:{name},age:{age}</h1>
            name : <input type="text" onChange={handleNameInput}/>
            age : <input type="text"  onChange={handleAgeInput}/>
            <button onClick={handleCommit}>commit</button>
        </div>
    )
}

// const mapState  = (state)=>({
//     name:state.name,
//     age:state.age
// })

const mapState  = (state)=>{

    console.log('state',state); 
    // 一个reducer ：state =>{reducer1State}
    // 如果合并reducer ： state =>{reducer1Key:reducer1State,reducer2Key:reducer2State,}
    const {name,age}  = state.student
    return {
        name,
        age
    }
}

const mapDispatch = (dispatch)=>({
    handleNameInput:(e)=>{
        let action  = Actions.nameAction(e.target.value)
        dispatch(action)
    },
    handleAgeInput:(e)=>dispatch(Actions.ageAction(e.target.value)),
    handleCommit:()=>dispatch({type:'COMMIT'})
})


const StudentContainer = connect(mapState,mapDispatch)(Student)

export default StudentContainer
